<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类式组件</title>
</head>
<body>
<div id="container">

</div>
</body>
</html>


<!--引入react核心库-->
<script type="text/javascript" src="../Js/react.development.js"></script>
<!--引入react-dom库,用于支持react操作dom-->
<script type="text/javascript" src="../Js/react-dom.development.js"></script>
<!--引入babel库,用于将jsx转成js-->
<script type="text/javascript" src="../Js/babel.min.js"></script>

<script type="text/babel">//此处一定要写text/babel，将jsx转成js
  // 创建类式组件
  class MyComponent extends React.Component{
      // render放在哪里？---放在MyComponent的原型对象上，供实例对象使用
      // render中的this指向哪里？---MyComponent的实例对象<=>MyComponent组件实例对象
      render(){
          console.log(this)
          return <h2>我是用类定义的组件（适用于复杂组件的定义）</h2>
      }
  }
  // 渲染组件到页面
  ReactDOM.render(<MyComponent/>,document.getElementById("container"))

//执行ReactDOM.render(<MyComponent/>,document.getElementById("container"))之后发生了什么？
// 1.React解析组件标签，找到了MyComponent组件
// 2.发现MyComponent是由类创建的，然后new一个实例对象，通过该实例调用原型上的render方法
// 3.将render方法返回的虚拟DOM转化为真实DOM，呈现在页面上
</script>